<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js和树一（任务七）</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #root{
            width: 980px;
            margin: 30px auto;
        }
        #root span{
            position: absolute;
            bottom: 0;
            right: 5px;
            line-height: 30px;
            font-size: 12px;
        }
        #root b{
            position: absolute;
            top: 5px;
            left: 50%;
        }
       div{
            min-width: 30px;
            min-height: 30px;
            position: relative;
            display: flex;
            padding: 0 20px 30px 0;
            margin: 30px 0 0 30px;
            background-color: #fff;
            text-align: center;
            border: 1px solid black;
        }
        #btn{
            display: block;
            text-align: center;
            border: none;
            margin: 0;
        }
        #btn button{
            margin-left: 20px;
        }
        P#result{
            margin-left: 250px;
        }
        div.ergodicState{
            background-color: #5cb85c;
            border-color: #5cb85c;
        }
        .undergodicState{
            background-color: #aaaaaa;
            border-color: #aaa;
            color: #fff !important;
            cursor: auto;
        }
    </style>
</head>
<body>
    <div id="root">
        <span>root</span>
        <b>A</b>
        <div>
            <b>B</b>
            <div>
                <b>D</b>
                <div>
                    <b>H</b>
                </div>
                <div>
                    <b>I</b>
                </div>
            </div>
            <div>
                <b>E</b>
                <div>
                    <b>J</b>
                </div>
                <div>
                    <b>K</b>
                </div>
            </div>
        </div>
        <div>
            <b>C</b>
            <div>
                <b>F</b>
                <div>
                    <b>L</b>
                </div>
                <div>
                    <b>M</b>
                </div>
            </div>
            <div>
                <b>G</b>
                <div>
                    <b>N</b>
                </div>
                <div>
                    <b>O</b>
                </div>
            </div>
        </div>
    </div>
    <div id="btn">
       <button id="Pre">先序遍历</button>
        <button id="Order">中序遍历</button>
        <button id="Last">后序遍历</button>
    </div>
    <p id="result">遍历顺序：</p>
    <script>
        //先序遍历
        function preOrder(data) {
            var pre=document.getElementById("Pre");
            var order=document.getElementById("Order");
            var last=document.getElementById("Last");
            pre.className="ergodicState";
            order.className="undergodicState";
            last.className="undergodicState";
            pre.setAttribute("disabled","disabled");
            order.setAttribute("disabled","disabled");
            last.setAttribute("disabled","disabled");
            ergodicState(data);
            return false;
        }
        //中序遍历
        function inOrder(data) {
            var pre=document.getElementById("Pre");
            var order=document.getElementById("Order");
            var last=document.getElementById("Last");
            order.className="ergodicState";
            pre.className="undergodicState";
            last.className="undergodicState";
            pre.setAttribute("disabled","disabled");
            order.setAttribute("disabled","disabled");
            last.setAttribute("disabled","disabled");
            var stack=[],sortResult=[],i=0;
            while(true)
            {
                if(i===data.length){
                    ergodicState(sortResult);
                    return false;
                }
                if(data[i].getElementsByTagName("div").exist()){
                    stack.push(data[i]);
                }
                else{
                    sortResult.push(data[i]);
                    if(stack.length!=0)
                    {
                        sortResult.push(stack.pop());
                    }
                }
                i++;
            }
        }
        //后续遍历
        function postOrder(data) {
            var pre=document.getElementById("Pre");
            var order=document.getElementById("Order");
            var last=document.getElementById("Last");
            last.className="ergodicState";
            order.className="undergodicState";
            pre.className="undergodicState";
            pre.setAttribute("disabled","disabled");
            order.setAttribute("disabled","disabled");
            last.setAttribute("disabled","disabled");
            var stack=[],sortResult=[],i=0;
            var pushs = function() {
                for(var j = len - 1; j >= 0; j--) {
                    if (typeof stack[j] != "undefined") {
                        var d = stack[j][0].getElementsByTagName("div").length + 1;
                        if(stack[j][1] >= d) {
                            sortResult.push(stack[j][0]);
                            delete stack[j];
                        }
                    }
                }
            };
           while (true){
               var arr=[];
               var len=stack.length;
               if(len!=0){
                   for(var j in stack){
                       stack[j][1]+=1;
                   }
               }
               if(i>=data.length){
                   pushs();
                   ergodicState(sortResult);
                   return false;
               }
               if(data[i].getElementsByTagName("div").exist()){
                   arr[0]=data[i];
                   arr[1]=0;
                   stack.push(arr);
               }
               else{
                   if(len!=0)
                   {
                       pushs();
                   }
                   sortResult.push(data[i]);
               }
               i++;
           }
        }
        //遍历中 ergodicState
        function ergodicState(arr) {
            var index=0;
            arr[index].className+=" "+"ergodicState";
            var result=document.getElementById("result");
            result.innerHTML+=arr[index].getElementsByTagName("b")[0].innerHTML+" ";
            var timer=setInterval(function () {
                if(index<arr.length-1)
                {
                    arr[index].className=arr[index].className.replace(/ergodicState/,' ');
                    index++;
                    arr[index].className+=" "+"ergodicState";
                    result.innerHTML+=arr[index].getElementsByTagName("b")[0].innerHTML+' ';
                }
                else
                {
                    clearInterval(timer);
                    arr[index].className=arr[index].className.replace(/ergodicState/,' ');
                    var pre=document.getElementById("Pre");
                    var order=document.getElementById("Order");
                    var last=document.getElementById("Last");
                    pre.className="";
                    pre.removeAttribute("disabled");
                    order.className="";
                    order.removeAttribute("disabled");
                    last.className="";
                    last.removeAttribute("disabled");
                }

            },1000);
        }
       //判断dom中是否有这个节点
       Object.prototype.exist=function () {
           if(typeof this !="undefined"&&this.length>=1)
           {
               return true;
           }
           return false;
       };
        function Init() {
            var root=document.getElementById("root");
            var data=[root];
            var len=root.getElementsByTagName("div");
            var p=document.getElementsByTagName('p')[0];
            for(var i=0;i<len.length;i++)
            {
                data.push(len[i]);
               console.log( data[i].getElementsByTagName("b")[0].innerHTML);
            }
            document.getElementById("Pre").onclick=function () {
                p.innerHTML="遍历顺序：";
                preOrder(data);
            };
            document.getElementById("Order").onclick=function () {
                p.innerHTML="遍历顺序：";
                inOrder(data);
            };
            document.getElementById("Last").onclick=function () {
                p.innerHTML="遍历顺序：";
                postOrder(data);
            };
        }
        Init();
    </script>
</body>
</html>